<template>
  <div class="main">
    <!-- 展示个人信息 -->
    <div class="show-userInfo">
      <el-form v-loading="loading" status-icon :model="userNewInfo" label-width="120px">
        <el-form-item label="工号">
          {{ userNewInfo.userId }}
        </el-form-item>
        <el-form-item label="姓名">
          {{ userNewInfo.userName }}
        </el-form-item>
        <el-form-item label="所属党小组">
          {{ userNewInfo.userBranch }}
        </el-form-item>
        <el-form-item v-if="userNewInfo.userTypeName[0] !== null" label="当前所有权限">
          {{ userNewInfo.userTypeName[0] }}
        </el-form-item>
      </el-form>
    </div>
    <!-- 修改个人密码 -->
    <div class="update-userPwd">
      <el-button type="primary" @click="updateUserPwd()">修改密码</el-button>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">

      <div>
        <el-form ref="user" status-icon :model="user" label-width="80px" :rules="rules">
          <el-form-item label="工号">
            <el-input v-model="user.userId" disabled />
          </el-form-item>
          <el-form-item label="密码" prop="user_Pwd">
            <el-input v-model="user.user_Pwd" autocomplete="off" disabled />
          </el-form-item>

          <el-form-item label="新密码" prop="userPwd">
            <el-input v-model="user.userPwd" autocomplete="off" type="password" />
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input v-model="user.checkPass" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('user')">提交</el-button>
            <el-button @click="resetForm('user')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { updateUser, getAllInfo } from '../../../api/user.js'
import { getJurisdictionName } from '../../../api/jurisdiction.js'
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码!'))
      } else if (value.length < 4) {
        callback(new Error('请至少输入五位数密码！'))
      } else if (value.length > 15) {
        callback(new Error('请输入十五位以下的密码！'))
      } else {
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.user.userPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        userPwd: [{
          validator: validatePass, trigger: 'blur'
        }],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      user: {
        userId: '',
        userPwd: '',
        userType: '',
        checkPass: '',
        user_Pwd: ''
      },
      userNewInfo: {
        userId: '',
        userPwd: '',
        userType: '',
        userBranch: '',
        userTypeName: ''
      },
      userTypeName: [],
      userTypeName1: '',
      dialogFormVisible: false,
      loading: true
    }
  },
  created() {
    this.get_loc_data()
  },

  methods: {
    get_loc_data() {
      var that = this
      var user_Id = sessionStorage.getItem('userId')

      // 根据userId返回用户信息
      new Promise((resolve, reject) => {
        getAllInfo(user_Id).then(res => {
          resolve(res)
        })
      }).then((data) => {
        that._data.user.userId = data.obj.userId
        that._data.user.user_Pwd = data.obj.userPwd
        that._data.user.userType = data.obj.userType
        that._data.user.userName = data.obj.userinfo.userName
        // that.userTypeName1 = sessionStorage.getItem('userTypeName')
        // 变换党小组名称
        if (data.obj.userinfo.userBranch === 0) {
          that._data.user.userBranch = '不属于任何党小组'
        } else if (data.obj.userinfo.userBranch === 7) {
          that._data.user.userBranch = '其他'
        } else {
          that._data.user.userBranch = '第' + data.obj.userinfo.userBranch + '党小组'
        }
        that.getjurisdictionName(data.obj.userType)
      })
    },
    // 根据用户权限获取对应名称
    getjurisdictionName(userOldType) {
      // 根据用户权限获取对应名称
      var that = this
      var userType = userOldType.split(',')
      new Promise((resolve, reject) => {
        for (var y = 0; y < userType.length; y++) {
          getJurisdictionName(userType[y]).then((res) => {
            if (res.obj !== null) {
              var userTypeNameOld = sessionStorage.getItem('userTypeName')
              if (userTypeNameOld === null || userTypeNameOld === '0') {
                sessionStorage.setItem('userTypeName', res.obj.jurisdictionName)
              } else {
                var userTypeName = userTypeNameOld.split(',')
                if (userTypeName.length >= 1) {
                  for (var x = 0; x < userTypeName.length; x++) {
                    if (res.obj.jurisdictionName === userTypeName[x]) {
                      var userTypeNameStatus = '1'
                      break
                    }
                  }
                  if (userTypeNameStatus !== '1') {
                    userTypeName.push(res.obj.jurisdictionName)
                    sessionStorage.setItem('userTypeName', userTypeName)
                  }
                } else {
                  sessionStorage.setItem('userTypeName', res.obj.jurisdictionName)
                }
              }
            }
          })
        }
        this.$set(this.userTypeName, 0, sessionStorage.getItem('userTypeName'))
        resolve()
      }).then(() => {
        this.userNewInfo.userId = this._data.user.userId
        this.userNewInfo.userName = this._data.user.userName
        this.userNewInfo.userType = this._data.user.userType
        this.userNewInfo.userBranch = this._data.user.userBranch
        this.userNewInfo.userTypeName = this.userTypeName
        setTimeout(function() {
          that.loading = false
        }, 200)
      })
    },
    submitForm(formName) {
      var that = this
      var userInfo = []
      userInfo.userId = that._data.user.userId
      userInfo.userPwd = that._data.user.userPwd
      userInfo.userType = that._data.user.userType
      var oldUserPwd = that._data.user.user_Pwd
      if (oldUserPwd === userInfo.userPwd) {
        that.$message({
          message: '密码与原密码一致',
          type: 'warning'
        })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('是否确认修改？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              updateUser(userInfo).then((res) => {
                that.$message({
                  message: '修改成功',
                  type: 'success'
                })
                that.dialogFormVisible = false
                that._data.user.user_Pwd = userInfo.userPwd
                location.reload()
                this.$refs[formName].resetFields()
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消修改'
              })
            })
          } else {
            return false
          }
        })
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 修改密码
    updateUserPwd() {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style>
    .main{
        width: 600px;
        /* height: 400px; */
        margin-top: 5rem;
        margin-left: 5rem;
    }
</style>
